<template> 
  <div class="detail-container">
    <div>
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单"></el-step>
        <el-step title="库管发货"></el-step>
        <el-step title="确认收货"></el-step>
        <el-step title="完成评价"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{order.status | formatStatus}}</span>
        <div class="operate-button-container" v-show="order.status===1">
          <el-button size="mini">取消订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===2||order.status===3">
          <el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===4">
          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">订单编号</el-col>
          <el-col :span="12" class="table-cell-title">订单类型</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">{{order.sn}}</el-col>
          <el-col :span="12" class="table-cell">{{order.type | formatType}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">收货人</el-col>
          <el-col :span="12" class="table-cell-title">手机号码</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">{{user.nickname}}</el-col>
          <el-col :span="12" class="table-cell">{{user.mobile}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">元器件信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="electronic"
        style="width: 100%;margin-top: 20px" border>
        <el-table-column label="名称" width="120" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.electronic_name}}</p>
          </template>
        </el-table-column>
        <el-table-column label="封装" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.electronic_package}}
          </template>
        </el-table-column>
        <el-table-column label="规格/价格" width="120" align="center">
          <template slot-scope="scope">
            <p>￥{{scope.row.electronic_price}}/{{scope.row.electronic_spec}}</p>
          </template>
        </el-table-column>
        <el-table-column label="位置" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.electronic_position}}
          </template>
        </el-table-column>
        <el-table-column label="库存" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.electronic_stock}}
          </template>
        </el-table-column>
        <el-table-column label="订单数" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.order_count}}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{scope.row.electronic_price*scope.row.order_count}}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">操作信息</span>
      </div>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="order.historyList" border>
        <el-table-column label="操作者"  width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.operateMan}}
          </template>
        </el-table-column>
        <el-table-column label="操作时间"  width="160" align="center">
          <template slot-scope="scope">
            {{formatTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态"  width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatStatus}}
          </template>
        </el-table-column>
        <el-table-column label="付款状态"  width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatPayStatus}}
          </template>
        </el-table-column>
        <el-table-column label="发货状态"  width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus | formatDeliverStatus}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.note}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getElectronicOrderDetail } from '@/api/electronicOrder';
  const defaultReceiverInfo = {
    orderId:null,
    receiverName:null,
    receiverPhone:null,
    receiverPostCode:null,
    receiverDetailAddress:null,
    receiverProvince:null,
    receiverCity:null,
    receiverRegion:null,
    status:null
  };
  export default {
    name: 'orderDetail',
    filters: {
      formatType(value) {
        if (value === 1) {
          return '入库';
        } else if (value === 2) {
          return '出库';
        } else if (value === 3) {
          return '采购';
        }
      },
      formatStatus(value) {
        if (value === 1) {
          return '待处理';
        } else if (value === 2) {
          return '已发货';
        } else if (value === 3) {
          return '已收货';
        } else if (value === 4) {
          return '已评价';
        } else {
          return '无效订单';
        }
      },
    },
    data() {
      return {
        list: null,
        order: {},
        user: {},
        electronic: {},
        id: null
      }
    },
    created() {
      this.id = this.$route.query.id;
      getElectronicOrderDetail(this.id).then(response => {
        console.log(response.data)
        this.order = response.data.order;
        this.user = response.data.user;
        this.electronic = response.data.items;
      });
    },
    methods: {
      formatStepStatus(value) {
        if (value === 1) {
          //待发货
          return 2;
        } else if (value === 2) {
          //已发货
          return 3;
        } else if (value === 3) {
          //已完成
          return 4;
        }else {
          //待付款、已关闭、无限订单
          return 1;
        }
      },
    }
  }
</script>

<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

  .color-danger {
    color: red;
  }
</style>

